<template>
	<view>
		<view class="flex content btn-view">
			<view class="btn flex" @click="addItem">
				<u-icon name="plus" size="10"></u-icon>
				<text class="p-l-20">手动添加</text>
			</view>
			<view class="btn flex" @click="onBatchAdd">
				<u-icon name="plus" size="20"></u-icon>
				<text class="p-l-20">批量添加</text>
			</view>
		</view>

		<u-list>
			<u-list-item v-for="(item, index) in listData.positionList" :key="index">
				<liu-swipe-action ref="liuSwipeAction" :index="index" @clickItem="liuClickItem">
					<u-cell :title="item.name">
						<template slot="icon">
							<div style="color: #b6aeae;">{{ index }}.</div>
						</template>
					</u-cell>
				</liu-swipe-action>

			</u-list-item>
		</u-list>
		<!-- 手动添加 -->
		<u-popup class="u-pop" :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
			<view class="popup-view">
				<view class="title">
					新增仓位
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="value">
							<u--input border="surround" v-model="addPositionParams.name"></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onSave">
						保存
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 批量生成 -->
		<u-popup :show="batchShow" :round="10" :closeOnClickOverlay="false" mode="center">
			<view class="popup-view">
				<view class="title">
					批量生成
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="label">
							仓位
						</view>
						<view class="value flex">
							<u--input border="surround" v-model="batchParams.startNumber"></u--input>
							<text class="p-r-20 p-l-20">-</text>
							<u--input border="surround" v-model="batchParams.endNumber"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							前缀
						</view>
						<view class="value">
							<u--input border="surround" v-model="batchParams.prefix"></u--input>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							后缀
						</view>
						<view class="value">
							<u--input border="surround" v-model="batchParams.suffix"></u--input>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onBatchCencal">
						取消
					</view>
					<view class="btn" @click="onBatchConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="expenseTypeShow" title="修改仓位" @cancel="close" @confirm="addUpdateData()"
			:showCancelButton="showCancelButton" confirmText="保存">
			<u--input placeholder="请输入内容" border="surround" v-model="name"></u--input>
		</u-modal>
	</view>
</template>
<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
	props: {
		data: {
			type: Object,
			default: null,
		},
	},
	components: {
		clIcon,
	},
	watch: {
		data(n, o) {
			this.listData = n
			if (!this.listData.positionList || this.listData.positionList == null) {
				this.listData.positionList = []
			}
		}
	},
	data() {
		return {
			expenseTypeShow: false,
			showCancelButton: true,
			// listData.positionList: [],
			listData: {},
			// 手动添加
			show: false,
			addPositionParams: {
				name: ''
			},
			// 批量添加
			batchShow: false,
			batchParams: {
				startNumber: 1,
				endNumber: null,
				prefix: '',
				suffix: '',
			},
			name: '',
			index: null,
		};
	},
	created() {
		this.listData = this.data
		if (!this.listData.positionList || this.listData.positionList == null) {
			this.listData.positionList = []
		}
	},
	methods: {
		liuClickItem(item) {
			// 编辑
			if (item.id == 1) {
				this.$refs.liuSwipeAction[item.index].reset()
				this.index = item.index
				this.name = this.listData.positionList[item.index].name
				this.expenseTypeShow = true
			} else if (item.id == 2) {
				// 删除
				this.$refs.liuSwipeAction[item.index].reset()
				this.listData.positionList.splice(item.index, 1)
			}
		},
		addUpdateData() {
			this.listData.positionList[this.index].name = this.name
			this.expenseTypeShow = false

		},
		// 新增仓位
		addItem() {
			this.show = true;
		},
		onCencal() {
			this.show = false;
		},
		onSave() {
			this.listData.positionList.push(this.addPositionParams)
			this.onCencal()
		},
		// 批量添加
		onBatchAdd() {
			this.batchShow = true
		},
		onBatchCencal() {
			this.batchParams = {
				startNumber: this.listData.positionList.length,
				endNumber: null,
				prefix: '',
				suffix: '',
			}
			this.batchShow = false
		},
		onBatchConfirm() {
			if (!this.batchParams.startNumber || !this.batchParams.endNumber) {
				this.$refs.uToast.show({
					type: 'error',
					title: '默认主题',
					position: 'top',
					message: "批量生产的两个范围都要填",
					complete() {
						// uni.navigateBack()
					}
				})
				return
			}
			for (let index = this.batchParams.startNumber; index < this.batchParams.endNumber; index++) {
				this.listData.positionList.push({
					name: this.batchParams.prefix + index + this.batchParams.suffix
				})
			}
			this.onBatchCencal()
		}
	},
};
</script>

<style lang="scss" scoped>
.btn-view {
	justify-content: space-around;
	padding-left: 30rpx;
	margin: 24rpx 0;

	.btn {
		border: 1rpx dashed #999;
		padding: 14rpx 40rpx;
		border-radius: 8rpx;
	}
}

.form-item {
	margin-bottom: 32rpx !important;
}
</style>
